<template>
    <div id="login-register">
        <div class="lr-interface">
            <div class="title-excharge">
                <h1>论文管理系统</h1>
                <p class="excharge-text" @click="chargeToRegister">
                    {{ exchargeTip }}
                </p>
            </div>

            <div class="sub-info">
                {{ loginText }}
                <div class="sub-form">
                    <div>
                        <div v-if="ifLogin">
                            <userLogin />
                        </div>

                        <div v-else>
                            <userRegister @registerSuccess="chargeToLogin"/>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</template>

<script>
import userLogin from './UserLogin/userLogin.vue';
import userRegister from './UserRegister/userRegister.vue';
import './style.less'

export default {
    data() {
        return {
            ifLogin: true,
            loginText: '登录',
            exchargeTip: '若还没有账号，点击这里注册哦'
        }
    },
    components: {
        userLogin,
        userRegister
    },
    methods: {
        chargeToRegister() {
            this.ifLogin = !this.ifLogin;
            this.loginText = this.ifLogin ? '登录' : '注册';
            this.exchargeTip = this.ifLogin ? '若还没有账号，点击这里注册哦' : '若已有账号，请点击这里登录'
        },
        chargeToLogin(ifToLogin) {
            this.ifLogin = ifToLogin;
            this.loginText = ifToLogin ? '登录' : '注册';
            this.exchargeTip = ifToLogin ? '若还没有账号，点击这里注册哦' : '若已有账号，请点击这里登录'
        }
    }
}
</script>